<template>
	<view :class="themeName" style="padding-bottom: 10px">
		<u-form :model="form" ref="uForm" label-width="130" label-align='right' :error-type="['toast']">
			<view class="m-20 p-10 bg-white p-l-30">
				<u-form-item :label="$zhTran('抬头类型')">
					<view class="flex row-right">
						<u-radio-group v-model="form.title_type" :activeColor="themeColor">
							<u-radio v-for="(item, index) in invoice_opt" :key="index" :name="item.value" labelSize="24"
								v-if="allow_title_type.indexOf(item.value)>-1">
								{{ item.label }}
							</u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
				<u-form-item :label="$zhTran('发票类型')">
					<view class="row-value text-right p-r-10" @click="showPopVisiable">
						<view class="type-text">{{ invoice_type_text }} <u-icon name="arrow-right"></u-icon></view>
					</view>
				</u-form-item>
				<u-form-item :label="$zhTran('发票抬头')" required prop="title">
					<u-input v-model="form.title" :placeholder="$zhTran('需要开具发票的姓名')" input-align="right"></u-input>
				</u-form-item>
				<u-form-item :label="$zhTran('手机号')" required v-if="!form.title_type">
					<u-input v-model="form.mobile" :placeholder="$zhTran('请输入您的手机号')" input-align="right"></u-input>
				</u-form-item>
				<u-form-item :label="$zhTran('税号')" required v-if="form.title_type">
					<u-input v-model="form.duty_num" :placeholder="$zhTran('请输入企业税号')" input-align="right"></u-input>
				</u-form-item>
				<u-form-item :label="$zhTran('邮箱')" v-if="form.title_type">
					<u-input v-model="form.email" :placeholder="$zhTran('请输入你的联系邮箱')" input-align="right"></u-input>
				</u-form-item>
			</view>
			<!-- 企业发票使用 -->
			<view class="m-20 p-10 bg-white m-t-20 p-l-30" v-if="form.title_type">
				<u-form-item :label="$zhTran('开户银行')" required>
					<u-input v-model="form.deposit_bank" :placeholder="$zhTran('请输入开户银行')"
						input-align="right"></u-input>
				</u-form-item>
				<u-form-item :label="$zhTran('银行账号')" required>
					<u-input v-model="form.bank_account" :placeholder="$zhTran('请输入银行账号')"
						input-align="right"></u-input>
				</u-form-item>
				<u-form-item :label="$zhTran('企业电话')" required>
					<u-input v-model="form.mobile" :placeholder="$zhTran('请输入企业电话')" input-align="right"></u-input>
				</u-form-item>
				<u-form-item :label="$zhTran('企业地址')" required>
					<u-input v-model="form.bank_address" :placeholder="$zhTran('请输入企业地址')"
						input-align="right"></u-input>
				</u-form-item>
			</view>
			</block>
			<view class="form-panel bg-white" style="padding: 16px">
				<u-checkbox shape="circle" v-model="form.is_def" :activeColor="themeColor" :labelSize="24"
					:label="$zhTran('设置为默认抬头')" :coustomStyle="{ color: 'red' }">{{ $zhTran("设置为默认抬头") }}</u-checkbox>
			</view>
		</u-form>
		<view class="footer-panel">
			<view class="btn save" :style="{ backgroundColor: themeColor }" @click="saveInvoice">{{$zhTran("保存")}}
			</view>
			<view class="btn cancel" :style="{ borderColor: themeColor, color: themeColor }" @tap="goBack">
				{{ $zhTran("取消") }}
			</view>
		</view>
		<!-- 发票弹窗 -->
		<u-popup id="popup" v-model="showPop" border-radius="20" mode="bottom" :closeable="true">
			<view class="pop-container">
				<view class="pop-header">
					{{ $zhTran("发票类型选择") }}
				</view>
				<view class="invoice-type-container">
					<u-radio-group v-model="form.type" iconPlacement="left" @change="handleInvioceTypeChange"
						:iconSize="20">
						<view class="type-panel" v-for="(item, index) in invoice_type_list" :key="index"
							v-if="allow_type.indexOf(item.type)>-1">
							<view class="des-panel">
								<text class="main-des">{{ item.name }}</text>
								<text class="sub-des">{{ item.sub_des }}</text>
							</view>
							<u-radio :key="index" :name="item.type" :activeColor="themeColor">
							</u-radio>
						</view>
					</u-radio-group>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		apiAddUserIncoice,
		apiEditUserIncoice,
		apiUserIncoiceDetail,
		apiIncoiceConfig
	} from "@/api/invoice"
	export default {
		name: "AddInvoice",
		data() {
			return {
				invoice_id: '',
				source: '',
				form: {
					title: "",
					title_type: 0,
					type: 0,
					mobile: "",
					email: "",
					duty_num: "",
					deposit_bank: '',
					bank_account: '',
					bank_address: "",
					is_def: 0,
				},
				invoice_type_text: this.$zhTran("普通发票"),
				invoice_opt: [{
						value: 0,
						label: "个人",
					},
					{
						value: 1,
						label: "企业",
					},
				],
				showPop: false,
				invoice_type_list: [{
						type: 0,
						name: this.$zhTran("普通发票"),
						sub_des: this.$zhTran("纸质发票开出后将以邮寄形式交付"),
					}, {
						type: 1,
						name: this.$zhTran("增值税电子普通发票"),
						sub_des: this.$zhTran("纸质发票开出后将以邮寄形式交付"),
					},
					{
						type: 2,
						name: this.$zhTran("增值税电子专用发票"),
						sub_des: this.$zhTran("纸质发票开出后将以邮寄形式交付"),
					},
				],
				rules: {
					title: [{
						required: true,
						message: this.$zhTran('请填写发票抬头'),
						trigger: ['change', 'blur'],
					}],
				},
				allow: {}
			};
		},
		computed: {
			allow_title_type() {
				return this.allow.title_type == undefined || this.allow.title_type.length == 0 ? [] : this.allow.title_type
			},
			allow_type() {
				return this.allow.type == undefined || this.allow.type.length == 0 ? [] : this.allow.type
			}
		},
		onLoad() {
			const options = this.$Route.query
			this.invoice_id = options.id || ''
			this.source = options.source || ''
			uni.setNavigationBarTitle({
				title: this.$zhTran(this.invoice_id != '' ? '编辑发票' : '新增发票')
			});

			this.getConfig()
			if (this.invoice_id != '') this.getDetail()
		},
		onShow() {
			this.$refs.uForm.setRules(this.rules);
		},
		/* E LifeCircle hook */
		methods: {
			// 监听发票类型选择切换
			handleInvioceTypeChange(val) {
				this.invoice_type_text = this.invoice_type_list.filter(
					(item) => item.type === val
				)[0].name;
				this.type = this.invoice_type_list.filter(
					(item) => item.type === val
				)[0].type;
				this.showPop = false;
			},
			// 显示发票选择窗口
			showPopVisiable() {
				this.showPop = true;
			},
			// 返回上一层
			goBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			saveInvoice() {
				this.$refs.uForm.validate(valid => {
					if (valid) {

						if (this.form.is_def == undefined) this.form.is_def = 0

						this.form.is_def = !this.form.is_def ? 0 : 1

						let url = this.invoice_id == '' ? apiAddUserIncoice : apiEditUserIncoice
						url({
							...this.form,
						}).then((res) => {
							if (this.source == '') {
								this.$toast({
									title: this.$zhTran(this.invoice_id == '' ? '添加成功' : '编辑成功'),
									endtime: 1200
								}, {
									tab: 5,
									url: '/bundle3/pages/invoice/index?current=1'
								});
							} else {
								this.$toast({
									title: this.$zhTran(this.invoice_id == '' ? '添加成功' : '编辑成功'),
									endtime: 1200
								});
								this.goBack()
							}
						}).catch(err => {
							return this.$toast({
								title: this.$zhTran(err)
							});
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			getConfig() {
				apiIncoiceConfig().then((res) => {
					this.allow = res

					if (res.title_type.length == 0) {
						this.form.title_type = ''
					} else {
						this.form.title_type = res.title_type[0]
					}

					if (res.type.length == 0) {
						this.form.type = ''
						this.invoice_type_text = ''
					} else {
						this.form.type = res.type[0]
						this.invoice_type_text = this.invoice_type_list.filter(
							(item) => item.type === this.form.type
						)[0].name;
					}
				})
			},
			getDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				apiUserIncoiceDetail({
					id: this.invoice_id,
				}).then((res) => {
					this.form = res
					this.invoice_type_text = this.invoice_type_list.filter(
						(item) => item.type === res.type
					)[0].name;
				}).finally(() => {
					uni.hideLoading()
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.form-panel {
		margin: 10px;
		padding: 0 17px 0 21px;
		border-radius: 5px;
		background: #ffffff;

		.row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 62px;
			border-bottom: 0.8px solid #f1f1f1;

			.row-name {
				font-size: 14px;
				font-weight: 400;
				color: #333333;
			}

			.row-value {
				font-size: 14px;
				font-weight: 400;

				input {
					text-align: right;
				}

				.type-text {
					font-size: 14px;
					font-weight: 400;
					color: #333333;

					.icon {
						font-size: 10px;
						color: #959595;
						margin-left: 3px;
					}
				}
			}
		}
	}

	.footer-panel {
		margin: 25px 10px;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 42px;
			width: 100%;
			color: #ffffff;
			font-size: 14px;
			font-weight: 400;
			margin-bottom: 11px;
			border-radius: 800px;

			&.cancel {
				border: 1px solid #eee;
			}
		}
	}

	.invoice-type-container {
		height: 300px;
		background: #f5f5f5;
		padding-top: 10px;
	}

	.type-panel {
		width: calc(100% - 20px);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 19px 19px 18px 15px;
		margin: 10px;
		border-radius: 6px;
		background: #ffffff;

		.des-panel {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;

			.main-des {
				font-size: 14px;
				font-weight: 400;
				margin-bottom: 3px;
			}

			.sub-des {
				font-size: 11px;
				font-weight: 400;
				color: #333333;
				color: #999999;
			}
		}
	}

	.pop-container {
		background: #f5f5f5;
	}

	.pop-header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 10px;
		color: #333333;
		font-size: 16px;
		font-weight: 400;
		background: #f5f5f5;
	}

	::v-deep .u-form-item--right__content__slot {
		display: block !important;
	}
</style>